window.onload = function () {
    navPathDataBind();
    bigClassBind();
    var bigImgindex = 0;
    //路径导航数据渲染
    function navPathDataBind() {
        //获取元素对象
        var navpath = document.getElementById("navPath");
        //console.log(navpath);
        //获取数据
        var path = GoodData.Path;
        //console.log(path);
        //遍历数组
        for (i = 0; i < path.length; i++) {
            if (i == path.length - 1) {
                var aNode = document.createElement('a');
                aNode.href = path[i].url;
                aNode.innerHTML = path[i].title;
                navpath.appendChild(aNode);

            } else {
                //创建元素
                var aNode = document.createElement('a');
                aNode.href = path[i].url;
                aNode.innerHTML = path[i].title;
                //创建i标签
                var aNode2 = document.createElement('i');
                aNode2.innerHTML = '/';
                //让navPath追加a和i
                navpath.appendChild(aNode);
                navpath.appendChild(aNode2);
            }
        }
    }
    //放大镜移入移出
    function bigClassBind() {
        //获取小图框元素
        var smallpic = document.querySelector('#wrapper #content #center #left #leftTop #smallPic');
        var lefttop = document.querySelector('#wrapper #content #center #left #leftTop');
        //获取数据
        var imagessrc = GoodData.imagessrc;



        //设置移入事件
        smallpic.onmouseenter = function () {
            //创建蒙版元素
            var maskDiv = document.createElement('div');
            maskDiv.className = "mask";
            //创建大图框元素
            var BigPic = document.createElement('div');
            BigPic.id = "bigPic";
            //创建大图片元素
            var bigImg = document.createElement('img');
            bigImg.src = imagessrc[bigImgindex].b;
            //大图框追加大图片
            BigPic.appendChild(bigImg);
            //小图框追加蒙版元素
            smallpic.appendChild(maskDiv);
            //leftTop追加大图框
            lefttop.appendChild(BigPic);


            //设置移动事件
            smallpic.onmousemove = function (event) {
                var left = event.clientX - smallpic.getBoundingClientRect().left - maskDiv.offsetWidth / 2;
                var top = event.clientY - smallpic.getBoundingClientRect().top - maskDiv.offsetHeight / 2;
                var oop = smallpic.clientWidth - maskDiv.offsetWidth;
                var too = smallpic.clientHeight - maskDiv.offsetHeight;
                if (left < 0) {
                    left = 0;
                } else if (left > oop) {
                    left = oop;
                }
                if (top < 0) {
                    top = 0;
                } else if (top > too) {
                    top = too;
                }
                maskDiv.style.left = left + "px";
                maskDiv.style.top = top + "px";
                var scale = (smallpic.clientWidth - maskDiv.offsetWidth) / (bigImg.clientWidth - BigPic.clientWidth);
                bigImg.style.left = -(left / scale) + "px";
                bigImg.style.top = -top / scale + "px";

            }





            //设置移出事件
            smallpic.onmouseleave = function () {
                //让小图框移除蒙版元素
                smallPic.removeChild(maskDiv);

                //让leftTop元素移除大图框
                leftTop.removeChild(BigPic);
            }



        }

    }

    thumbnailData();
    //动态渲染放大镜缩略图
    function thumbnailData() {
        //获取piclist的ul
        var ul = document.querySelector("#wrapper #content #center #left #leftBottom #picList ul");
        //获取imagessrc元素
        var imagessrc = GoodData.imagessrc;
        //遍历数组
        for (i = 0; i < imagessrc.length; i++) {
            //创建li元素
            var newli = document.createElement("li");

            //创建img元素
            var newimg = document.createElement("img");
            newimg.src = imagessrc[i].s;
            newimg.alt="suoluetu"
            //li追加img
            newli.appendChild(newimg);
            //ul追加li
            ul.appendChild(newli);
        }


    }
    //点击缩略图的效果
    thumbnailClick();
    function thumbnailClick() {
        //获取全部li元素
        var liNodes = document.querySelectorAll('#wrapper #content #center #left #leftBottom #picList ul li');
        //获取smallpic元素
        var smallPicImg = document.querySelector('#wrapper #content #center #left #leftTop #smallPic img');
        //获取数据
        var smallpicsrc = GoodData.imagessrc;
        //设置小图默认为缩略图首图
        smallPicImg.src = smallpicsrc[0].s;
        //循环点击li
        for (let i = 0; i < liNodes.length; i++) {
            liNodes[i].onclick = function () {
                //变化小图路径
                bigImgindex = i;
                smallPicImg.src = smallpicsrc[i].s;
            }
        }
    }

    //点击左右箭头
    thumbnailLeftRightClick();
    function thumbnailLeftRightClick() {
        //获取两端的箭头
        var leftarry = document.getElementById("leftarry");
        var rightarry = document.getElementById("rightarry");
        //获取div
        var picList = document.getElementById("picList");
        //获取ul
        var ul = document.querySelector("#wrapper #content #center #left #leftBottom #picList ul");
        //获取全部li元素
        var liNodes = document.querySelectorAll('#wrapper #content #center #left #leftBottom #picList ul li');
        //计算
        var start = 0;
        //步长
        var step = (liNodes[0].offsetWidth + 20) * 2;
        //总体运动的距离值
        var endposition = (liNodes.length - 5) * (liNodes[0].offsetWidth + 20)
        //发生事件
        leftarry.onclick = function () {
            start -= step;
            if (start < 0) {
                start = 0;
            }
            ul.style.left = -start + "px";
        }

        rightarry.onclick = function () {
            start += step;
            if (start > endposition) {
                start = endposition;
            }
            ul.style.left = -start + "px";
        }


    }


    //商品详细数据的动态渲染
    rightTopData();
    function rightTopData() {
        //获得rightTop元素
        var rightTop = document.getElementById("rightTop");
        //查找数据
        var goodsdata = GoodData.goodsDetail;
        //创建字符串变量
        var s = `<h3>${goodsdata.title}</h3>
        <p>${goodsdata.recommend}</p>
        <div class="priceWrap">
            <div class="priceTop">
                <span>价&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;格</span>
                <div class="price">
                    <span>￥</span>
                    <p>${goodsdata.price}</p>
                    <i>降价通知</i>
                </div>
                <p>
                    <span>累计评价</span>
                    <span>${goodsdata.evaluateNum}</span>
                </p>
            </div>
            <div class="priceBottom">
                <span>促&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;销</span>
                <p>
                    <span>${goodsdata.promoteSales.type}</span>
                    <span>${goodsdata.promoteSales.content}</span>
                </p>
            </div>

        </div>
        <div class="support">
            <span>支&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;持</span>
            <p>${goodsdata.support}</p>
        </div>
        <div class="address">
            <span>配&nbsp;送&nbsp;至</span>
            <p>${goodsdata.address}</p>
        </div>`

        //重新渲染rightTop
        rightTop.innerHTML = s;
    }

    //商品选择动态渲染
    chooseWrap();
    function chooseWrap() {
        //获得chooseWrap元素
        var cw = document.getElementById("chooseWrap");
        //console.log(cw);
        //获得数据
        var data = GoodData.goodsDetail.crumbData;
        //循环数据
        for (var i = 0; i < data.length; i++) {
            var dlNode = document.createElement("dl");
            var dtNode = document.createElement("dt");
            dtNode.innerText = data[i].title;
            dlNode.appendChild(dtNode);
            for (var j = 0; j < data[i].data.length; j++) {
                var ddNode = document.createElement("dd");
                ddNode.innerText = data[i].data[j].type;
                ddNode.setAttribute("price", GoodData.goodsDetail.crumbData[i].data[j].changePrice);
                dlNode.appendChild(ddNode);
            }
            cw.appendChild(dlNode);
        }


    }

    //点击颜色变色排他效果实现
    clickddBind();
    function clickddBind() {
        var dlNodes = document.querySelectorAll('#wrapper #content #center #right .rightBottom .chooseWrap dl');

        var arr = new Array(dlNodes.length);

        var choose = document.querySelector('#wrapper #content #center #right .rightBottom .choose');

        //数组填充值
        arr.fill(0);

        // console.log(arr); // [0, 0, 0, 0]

        for (var i = 0; i < dlNodes.length; i++) {

            (function (i) {

                var ddNodes = dlNodes[i].querySelectorAll('dd');

                //2、遍历当前所有的dd元素
                for (var j = 0; j < ddNodes.length; j++) {

                    ddNodes[j].onclick = function () {
                        // console.log(i);
                        //  console.log(ddNodes[i]); // undefined
                        //this：表示哪一个元素真实的发生了事件
                        // console.log(this);

                        //清空choose元素
                        choose.innerHTML = "";

                        for (var k = 0; k < ddNodes.length; k++) {
                            ddNodes[k].style.color = "#666";
                        }

                        /**
                         * ddNodes[0].style.color = "#666";
                         * ddNodes[1].style.color = "#666";
                         * ddNodes[3].style.color = "#666";
                         */

                        //假设点击的是第二个元素，下标为1'
                        //ddNodes[1].style.color = "red";
                        //相同下标的dd元素的字体颜色在进行覆盖操作,而其他未点击的元素都是在进行重新设置颜色*/

                        this.style.color = "red";


                        //点击哪一个dd元素动态的产生一个新的mark标记元素
                        arr[i] = this;
                        changePriceBind(arr);
                        //遍历arr数组，将非0元素的值写入到mark标记
                        arr.forEach(function (value, index) {
                            //只要是为真的条件，咱们就动态的来创建mark标签
                            if (value) {
                                //创建div元素
                                var markDiv = document.createElement('div');
                                //并且设置class属性
                                markDiv.className = 'mark';
                                //并且设置值
                                markDiv.innerText = value.innerText;
                                //创建a元素
                                var aNode = document.createElement('a');
                                //并且设置值
                                aNode.innerText = 'X';
                                //并且设置下标
                                aNode.setAttribute('index', index);
                                //让div追加a 
                                markDiv.appendChild(aNode);

                                //让choose元素追加div
                                choose.appendChild(markDiv);



                            }
                        })

                        //获取所有的a标签元素，并且循环发生点击事件
                        var aNodes = document.querySelectorAll('#wrapper #content #center #right .rightBottom .choose .mark a');

                        for (var n = 0; n < aNodes.length; n++) {
                            aNodes[n].onclick = function () {
                                //获取点击的a标签身上的index属性值
                                var idx1 = this.getAttribute('index');
                                changePriceBind(arr);
                                //恢复数组中对应下标元素的值
                                arr[idx1] = 0;

                                //查找对应下标的那个dl行中的所有的dd元素
                                var ddlist = dlNodes[idx1].querySelectorAll('dd');

                                //遍历所有的dd元素
                                for (var m = 0; m < ddlist.length; m++) {
                                    //其余所有dd的文字颜色为灰色
                                    ddlist[m].style.color = "#666";
                                }

                                //默认的第一个dd文字颜色恢复成红色
                                ddlist[0].style.color = 'red';

                                //删除对应下标位置的mark标记
                                choose.removeChild(this.parentNode);

                                changePriceBind(arr);
                            }
                        }

                    }
                }
            })(i)


        }




    }


    
    function changePriceBind(arr) {

        //原价格标签元素
        var oldPrice = document.querySelector("#wrapper #content #center #right .rightTop .priceWrap .priceTop .price p");
        //取出默认的价格
        var price = GoodData.goodsDetail.price;
        //遍历arr数组
        for (var i = 0; i < arr.length; i++) {
            if (arr[i]) {
                //数据类型的强制转换
                var changeprice = Number(arr[i].getAttribute('price'));
                //最终价格
                price += changeprice;
            }

        }

        oldPrice.innerText = price;
        
        var leftprice=document.getElementById("leftprices");
        leftprice.innerText='¥'+price;

        var ipts=document.querySelectorAll('#wrapper #content .goodsDetailWarp .rightDetail .chooseBox .listWrap .middle li input');
        var newprice=document.getElementById("rightprices");
        for(var j=0;j<ipts.length;j++){
            if(ipts[j].checked){
                price+=Number(ipts[j].value);
            }
        }

        newprice.innerText='¥'+price;



    }
    //选择搭配中间区域复选框套餐变动效果
    chooseprice();
    function chooseprice(){
        var ipts=document.querySelectorAll('#wrapper #content .goodsDetailWarp .rightDetail .chooseBox .listWrap .middle li input');
        var leftprice=document.getElementById("leftprices");
        var newprice=document.getElementById("rightprices");
        for(var i=0;i<ipts.length;i++){
            ipts[i].onclick=function(){
                var oldprice=Number(leftprice.innerText.slice(1));
                for(var j=0;j<ipts.length;j++){
                    if(ipts[j].checked){
                        oldprice=oldprice+Number(ipts[j].value);

                    }
                }
                newprice.innerText='¥'+oldprice;
            }
        }
    }
//tabbtn被点击的元素，tabcont转换的元素
    function Tab(tabbtn,tabcont){
        for(var i=0;i<tabbtn.length;i++){
            tabbtn[i].index=i;
            tabbtn[i].onclick=function(){
                for(var j=0;j<tabbtn.length;j++){
                    tabbtn[j].className='';
                    tabcont[j].className='';
                }
                this.className='active';
                tabcont[this.index].className='active';
            }
        }
    }
//点击左侧选项卡
leftTab();
    function leftTab(){
        var h4s=document.querySelectorAll('#wrapper #content .goodsDetailWarp .leftAside .asideTop h4');
        var divs=document.querySelectorAll('#wrapper #content .goodsDetailWarp .leftAside .aslideContent >div');
        Tab(h4s,divs);
    }
rightTab();
    function rightTab(){
        var lis=document.querySelectorAll('#wrapper #content .goodsDetailWarp .BottomDetail .tabBtn li');
        var divs=document.querySelectorAll('#wrapper #content .goodsDetailWarp .BottomDetail .tabContents div');
        Tab(lis,divs);
    }
rightasightbind();
    function rightasightbind(){
        var btn=document.querySelector('#wrapper .rightAside .btns ');
        var divs=document.querySelector('#wrapper .rightAside');
        flag=true;
        btn.onclick=function(){
            if(flag){
                //flag=false;
                btn.className='btns btnsOpen';
                divs.className='rightAside asideOpen'
            }
            else{
                //flag=true;
                btn.className='btns btnsClose';
                divs.className='rightAside asideClose'
            }
            flag=!flag;
        }
    }






}
